<template>
  <div class="version-label" v-if="versionLabel">
    <el-tooltip v-if="isTestEnv && isShow" content="点击查看更新日志">
      <span class="version-code go-changelog" @click="showChangeLogDrawer">
        {{ versionLabel }}
      </span>
    </el-tooltip>
    <span v-else class="version-code">{{ versionLabel }}</span>
    <change-log-drawer v-if="isTestEnv && isShow" :visible.sync="drawerVisible"></change-log-drawer>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { versionName } from '../../version.config'
import ChangeLogDrawer from './ChangeLogDrawer.vue'

export default {
  name: 'VersionLabel',
  components: { ChangeLogDrawer },
  props: {},
  data() {
    return {
      drawerVisible: false,
      isShow: false,
    }
  },
  computed: {
    ...mapGetters(['isTestEnv']),
    versionLabel() {
      if (versionName) {
        return 'V ' + versionName
      }
      return null
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    showChangeLogDrawer() {
      this.drawerVisible = true
    },
  },
}
</script>
<style lang="scss" scoped>
.version-label {
  .version-code {
    color: #666;
  }
  .go-changelog {
    cursor: pointer;
    &:hover {
      color: #2b78f1;
    }
  }
}
</style>
